/**
 * @Author:高志斐
 * @Date:2020/6/30
 * @Description:这是底部导航栏
 */
import React,{Component} from "react";
import {Link} from "react-router-dom";

export default class Xfooter extends Component {
    constructor(props) {
        super(props);
        //选中的tab页
        this.state = {
            tab:'0',
        };
    }

    //点击底部导航栏的回调
    setTabId(index,e){
        this.setState({
            tab:index
        })
    }
    //在生命周期函数中加入缓存
    componentDidMount() {
        if(localStorage.getItem('tabs')){
            this.setState({
                tab:localStorage.getItem('tabs')
            })
            localStorage.removeItem('tabs');
        }
    }
    //在生命周期函数中加入缓存
    componentDidUpdate(prevProps, prevState, snapshot) {
        if(localStorage.getItem('tabs')){
            this.setState({
                tab:localStorage.getItem('tabs')
            })
            localStorage.removeItem('tabs');
        }
    }

    render(){
        return(
            <div className="ui-module-bottom_navBar container">
                <ul className="clearfix">
                    {/*首页*/}
                    <li className="col-md-8 item" onClick={this.setTabId.bind(this,'0')} >
                        <Link className={this.state.tab === '0'?"active":""}  to={'/terran/home'}>
                            <span className={'nav-icon nav-home'}/>
                        </Link>
                    </li>
                    {/*产品页*/}
                    <li className="col-md-8 item" onClick={this.setTabId.bind(this,'1')} >
                        <Link className={this.state.tab === '1'?"active":""}  to={'/terran/product'}>
                            <span className={'nav-icon nav-product'}/>
                        </Link>
                    </li>
                    {/*我的页*/}
                    <li className="col-md-8 item" onClick={this.setTabId.bind(this,'2')} >
                        <Link className={this.state.tab === '2'?"active":""}  to={'/terran/my'}>
                            <span className={'nav-icon nav-my'}/>
                        </Link>
                    </li>
                </ul>
            </div>
        );
    }
}
